{include file="public/header" /}
<style>
.content{width:50%}
.headurl{width:60px;height:60px;border-radius:50%;border:1px solid #ccc;padding:1px;cursor:pointer;}
.empty-headurl{text-align:center}
.empty-headurl i {line-height:60px;font-size:25px;color:#999;}
</style>
</head>
<body>
<div id="box" v-cloak class="box">
	<div class="content">
		<el-form ref="form" :model="form" label-width="90px" :rules="rules" label-position="top" size="small">
			<el-form-item label="头像" prop="headurl">
				<label for="headurl">
					<img :src="form.headurl" class="headurl" v-if="form.headurl">
					<div  class="headurl empty-headurl" v-else>
						<i class="el-icon-plus"></i>
					</div>
				</label>
				<input type="file" id="headurl" style="display:none" @change="upheadurl()">
			</el-form-item>
			<el-form-item label="中文姓名" prop="user_name">
				<el-input placeholder="情输入中文姓名" v-model="form.user_name"></el-input>
			</el-form-item>
			<el-form-item label="英文姓名" prop="eng_name">
				<el-input placeholder="情输入英文姓名" v-model="form.eng_name"></el-input>
			</el-form-item>
			<el-form-item label="生日" prop="birth">
				<el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="form.birth"></el-date-picker>
			</el-form-item>
			<el-form-item label="标签" prop="badge">
				<el-input placeholder="情输入标签" v-model="form.badge"></el-input>
			</el-form-item>
			<el-form-item label="博主简介" prop="brief">
				<el-input type="textarea" placeholder="情输入个人简介" :rows="6" v-model="form.brief"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submit('form')">提交数据</el-button>
			</el-form-item>
		</el-form>
	</div>
</div>
<script>
new Vue({
	el : '#box',
	data:{
		form : {$info | raw},
		rules : {
			headurl : [
				{ required: true, message: '请上传头像', trigger: 'blur' }
			],
			user_name : [
				{ required: true, message: '请填写姓名', trigger: 'blur' }
			],
			eng_name : [
				{ required: true, message: '请填写英文名', trigger: 'blur' }
			],
			birth : [
				{ required: true, message: '请选择出生日期', trigger: 'blur' }
			],
			brief : [
				{ required: true, message: '请填写个人简介', trigger: 'blur' }
			],
			badge : [
				{ required: true, message: '请输入标签', trigger: 'blur' }
			]
		}
	},
	mounted:function(){
	},
	methods:{
		//上传头像
		upheadurl:function(){
			var that   = this;
			var file = event.currentTarget.files[0];
			var reader = new FileReader();
			reader.readAsDataURL(file);//调用自带方法进行转换
            reader.onload = function(e) {
            	var img=this.result;
            	that.form.headurl = img;
            }
		},
		submit:function(formName){
			var that = this;
			this.$refs[formName].validate((valid) => {
	    		  if (valid) {
	    			  $.post("{:url('index')}",this.form,function(res){
	    				  if (res.code) {
	    					  toastSuccess(that,res.msg);
	    				  } else {
	    					  toastError(that,res.msg);
	    				  }
	    			  });
            	  } else {
            		  toastError(this,'表单信息不完整');
              	  return false;
            	 }
            });
		}
	}
});
</script>
</body>
</html>